<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06-插件</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="root"></div>

    <script>
      //Plugin插件  就是把通用性的功能封装起来
      const MyPlugin = {
        install(app, options) {
          console.log(app, options);

          app.provide("name", "yunmu");

          app.directive("focus", {
            mounted(el) {
              el.focus();
            },
          });

          app.mixin({
            mounted(){
              console.log("mixin");
            }
          })

          app.config.globalProperties.$sayHello = "hello world";
        },
      };

      const app = Vue.createApp({

        mounted() {
          console.log(this.$sayHello);
        },

        template: `
                  <child />  
                  <input v-focus>  
                `,
      });

      app.component("child", {
        inject: ["name"],
        template: `<div>hello world {{name}}</div>`,
      });

      app.use(MyPlugin, { username: "云牧" });

      const vm = app.mount("#root");
    </script>
  </body>
</html>
